<template>
  <div class="worksite-image-property">
    <span class="name">{{ name || '' }}</span>

    <div class="worksite-image-property-list">
      <Icon
        class="page left"
        :class="{ enable: currentPage !== 0 }"
        name="shangyibu"
        v-if="images.length > 3"
        @click.native="previous"
      />

      <div
        class="worksite-image-property-list-images"
        v-if="images.length"
      >
        <el-image
          v-for="(item, index) in shownImages"
          :key="index"
          :src="item.url"
          :preview-src-list="
            images.map((image) => image.url)
          "
          fit="fill"
        />
      </div>

      <Icon
        class="page right"
        :class="{
          enable: images.length > (currentPage + 1) * 3
        }"
        name="xiayibu"
        v-if="images.length > 3"
        @click.native="next"
      />
    </div>
  </div>
</template>

<script>
import Icon from '@/components/icon'

export default {
  name: 'WorksiteImageProperty',
  props: {
    name: {
      type: String,
      required: true
    },
    images: {
      type: Array,
      required: true
    }
  },
  components: {
    Icon
  },
  data() {
    return {
      currentPage: 0
    }
  },
  methods: {
    previous() {
      if (this.currentPage !== 0) {
        this.currentPage = this.currentPage - 1
      }
    },
    next() {
      if (this.images.length > (this.currentPage + 1) * 3) {
        this.currentPage = this.currentPage + 1
      }
    }
  },
  computed: {
    shownImages() {
      if (this.images.length <= 3) {
        return [...this.images]
      } else {
        return [
          ...this.images.slice(
            this.currentPage * 3,
            (this.currentPage + 1) * 3
          )
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.worksite-image-property {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .name {
    color: #d2e6f0;
  }

  .page {
    display: inline-block;
    color: gray;

    &.left {
      margin-right: 10px;
    }

    &.right {
      margin-left: 10px;
    }

    &.enable {
      color: white;
    }
  }

  &-list {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-images {
      flex: 1;
      display: flex;
      align-items: center;

      .el-image {
        width: calc((100% - 12px * 2) / 3);
        height: 84px;
      }

      .el-image + .el-image {
        margin-left: 12px;
      }
    }
  }
}
</style>
